<template>
<div>
  <div
    id="mountNode"
    ref="mountNode"
    style="margin-top: 3%; margin-left: 20%"
  />
  <!-- 抽屉 -->
  <el-drawer v-model="open" size="40%">
    <el-descriptions class="margin-top" title="详细信息" :column="2" border>
      <el-descriptions-item label="流程名">{{
        flowData.flowName
      }}</el-descriptions-item>
      <el-descriptions-item label="流程审核">{{
        flowData.flowModel.flowName
      }}</el-descriptions-item>
      <view v-for="(item, index) in parts" :key="index">
        <el-descriptions-item label="用户昵称">{{
          item.nickName
        }}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{
          item.userName
        }}</el-descriptions-item>
      </view>
    </el-descriptions>
  </el-drawer>
  </div>
</template>

<script setup name="FlowData" >
import G6 from "@antv/g6";
import { getFlow, getFlowAssign } from "@/api/system/flow";
import { getDept } from "@/api/system/dept";
import { ref } from "vue";
import { getRole } from "@/api/system/role";

const key = ref(0);
const { proxy } = getCurrentInstance();
const parts = ref([]);
const flowAssignData = ref();
const viewData = ref();
const route = useRoute();
const data = ref({
  // 点集
  nodes: [],
  // 边集
  edges: [],
});
const mountNode = ref(null);
const flowData = ref();
const open = ref(false);
const assignQuery = ref({
  assignType: undefined,
  flowDefineCode: undefined,
  flowNodeId: undefined,
  order: "DESC",
  pageNum: 1,
  pageSize: 10,
  sortBy: "id",
});

//流程图初始化
function initGraph() {
  const container = mountNode.value;
  const graph = new G6.Graph({
    container: container, // 指定图画布的容器 id，与第 9 行的容器对应
    // 画布宽高
    width: 800,
    height: 500,
    defaultNode: {
      type: "rect",
      size: [135, 40],
      color: "#5B8FF9",
      style: {
        fill: "#9EC9FF",
        lineWidth: 0.5,
      },
      labelCfg: {
        style: {
          fill: "#000000",
          fontSize: 15,
        },
      },
    },
    defaultEdge: {
      style: {
        stroke: "#5B8FF9",
        endArrow: true,
      },
    },
  });
  graph.data(data.value); // 读取 Step 2 中的数据源到图上
  graph.render(); // 渲染图
  //点击节点事件
  graph.on("node:click", function (evt) {
    //获取当前节点数据信息
    var nodeId = evt.item._cfg.id;
    getOne(nodeId);
    open.value = true;
  });
}
function getList() {
  getFlow(route.params && route.params.flowId).then((res) => {
    flowData.value = res;
    console.log(flowData.value);
    const nodeList = flowData.value.flowModel.nodeList;
    let i = 0;
    nodeList.forEach((element) => {
      //获取点集
      data.value.nodes[i] = {};
      if (element.id === "start" || element.id === "end") {
        data.value.nodes[i].type = "circle";
        data.value.nodes[i].size = [50];
      }

      data.value.nodes[i].id = element.id;
      data.value.nodes[i].label = element.name;
      data.value.nodes[i].x = 100 + i * 200;
      data.value.nodes[i].y = 200;
      //获取边集
      if (i < nodeList.length - 1) {
        data.value.edges[i] = {};
        data.value.edges[i].source = element.id;
        data.value.edges[i].target = element.nextNodeId;
      }
      i++;
    });

    initGraph();
  });
  key.value++;
}
function getOne(nodeId) {
  console.log(flowData.value);
  let code = flowData.value.flowDefineCode;
  assignQuery.value.flowDefineCode = code;
  assignQuery.value.flowNodeId = nodeId;
  getFlowAssign(assignQuery.value).then((res) => {
    let fun;
    switch (res.content[0].assignType) {
      case "ROLE":
        fun = getRole;
        break;
      case "DEPT":
        fun = getDept;
        break;
    }
    flowAssignData.value = res;
    fun(res.content[0].assignId).then((res) => {
      viewData.value = res;
      parts.value = res?.users;
    });
  });
}
getList();
</script>